<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Layout Container Demo 2</title>
    <style type="text/css">
        @import "http://o.aolcdn.com/dojo/1.1/dijit/themes/tundra/tundra.css";
        @import "http://o.aolcdn.com/dojo/1.1/dojo/resources/dojo.css";
    </style>
    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>
    <style>  
        /* NOTE: for a full screen layout, must set body size equal to the viewport. */
        html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    </style>
    <script type="text/javascript">
    dojo.require("dojo.parser");
    /*
    dojo.require("dijit.layout.AccordionPane");
    */
    dojo.require("dijit.layout.ContentPane");
    dojo.require("dijit.layout.BorderContainer");
    dojo.require("dijit.layout.SplitContainer");
    dojo.require("dijit.layout.AccordionContainer");
    dojo.require("dijit.layout.TabContainer");
    dojo.require("dijit.layout.StackContainer");    
    dojo.require("dijit.form.Button");
     </script>
</head>
<body class="tundra">
	<div dojoType="dijit.layout.BorderContainer" style="height: 100%;" design="headline">
		<div dojoType="dijit.layout.ContentPane" region="top" style="background:black;color:white;height:40px">TOP</div>
		<div dojoType="dijit.layout.ContentPane" region="left" style="background-color:#eee;width:250px;">
			<div dojoType="dijit.layout.AccordionContainer" duration="200" style="height:300px;overflow:hidden;">
				<div dojoType="dijit.layout.AccordionPane" selected="true" title="Pane 1" href="content.html">
					<p >Nunc consequat nisi vitae quam. Suspendisse sed nunc. Proin ...</p >
				</div>
				<div dojoType="dijit.layout.AccordionPane" title="Pane 2 (lazy load)" href="content.html" ></div>
				<div dojoType="dijit.layout.AccordionPane" title="Pane 3"></div>                
			</div>
		</div>
		<div dojoType="dijit.layout.ContentPane" region="center" style="background-color:#f6f6f6">
			<div id="LittleRed" dojoType="dijit.layout.ContentPane" title="Little Red Cap" style="height:100%">
				<button id="previous" onClick="dijit.byId('StackContainer').back()"><</button>
				<button id="next" onClick="dijit.byId('StackContainer').forward()">></button>
				<div id="StackContainer" dojoType="dijit.layout.StackContainer" style="height:20em"> 
					<div id="Page1" dojoType="dijit.layout.ContentPane" label="Intro">
						This version of the GNU Lesser General Public License incorporates
						the terms and conditions of version 3 of the GNU General Public
						License, supplemented by the additional permissions listed below.
					</div>
					<div id="Page2" dojoType="dijit.layout.ContentPane">
						As used herein, "this License" refers to version 3 of the GNU Lesser
						General Public License, and the "GNU GPL" refers to version 3 of the GNU
						General Public License. "The Library" refers to a covered work governed by 
						this License, other than an Application or a Combined Work as defined below.
					</div>						
					<div id="Page3" dojoType="dijit.layout.ContentPane" >
						You may convey a covered work under sections 3 and 4 of this License
						without being bound by section 3 of the GNU GPL.
					</div>
					<div id="Page4" dojoType="dijit.layout.ContentPane" href="content.html"></div>
				</div>			                			
			</div>
	    </div>
		<div dojoType="dijit.layout.ContentPane" region="bottom" style="background:#666;color:white;height:20px">BOTTOM</div>	    
	</div>
</body>
</html>